<template>
	<div class="ejectP">
		<u-navbar :is-back="true" title="弹出设备" back-text=''>
			<view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;">
				<!-- <div>
				<image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
				</div> -->
			</view>
		</u-navbar>

		<div>
			<image style="width:100%" src="../../style/image/Sequiptment/bane.png" alt="">
		</div>

		<div>
			<div style="font-size: 0.89rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				text-align: center;
				margin: 0.5rem;">{{deviceDic.modelsName}}</div>
			<div style="font-size: 0.89rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				text-align: center;
				margin: 0.5rem;">SN号：{{deviceDic.sn}}</div>
		</div>


		<div class="selectPositionC">
			<div style="
				font-size: 0.89rem;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				margin: 1rem 0.5rem;">充电宝槽位(从左至右)</div>

			<div class="euqiptmentListP">
				<div class="euqiptmentList" v-for="(item,index) in euqiptmentLists" :key="index" @click="selectM(item)">
					<div class="euqiptmentList-child" :style="{ 
                     color:selectId==index?'white':'black' 
                     ,backgroundColor:selectId==index?'#02af74':'white'
                     ,border:selectId==index?'1px solid #02af74':'1px solid #666666' }">
						<div style="font-size: 1rem;">{{item.id}}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footP">
			<div @click="outDevice" class="footL" style="background-color: #02af74;">
				<image style="width: 1rem;;height:1rem;" src="../../style/image/cargo/add.jpg" alt="">
					<div style="color: white;margin-left: 0.2rem;">弹出</div>
			</div>
			<div @click="forceOut" class="footL" style="background-color: #0086FF;">
				<image style="width: 1rem;;height:1rem;" src="../../style/image/cargo/add.jpg" alt="">
					<div style="color: white;margin-left: 0.2rem;">强制弹出</div>
			</div>
		</div>

	</div>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from 'vue-property-decorator'

	import {
		forcePopupTerminal
	} from "../../utils/uniApi";

	import {
		popupTerminal
	} from "../../utils/uniApi";


	@Component({ //   @Component  是一个装修器   不可以在下面写语句
		name: 'test',
	})


	export default class extends Vue {

		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		}) msg!: string;

		public selectId: any = 999;
		public deviceDic: any = {}; //

		public euqiptmentLists = [{
				status: true,
				id: 1
			},
			{
				status: true,
				id: 2
			},
			{
				status: true,
				id: 3
			},
			{
				status: true,
				id: 4
			}, {
				status: true,
				id: 5
			}, {
				status: true,
				id: 6
			}
		]


		created() {}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑


			//  uni.navigateTo({
			// url: './selectBusin'
			// });
		}

		onLoad(value: any) {

			console.log(value, 12312312)

			console.log(JSON.parse(decodeURIComponent(value.deviceDic)), 12312312)

			this.deviceDic = JSON.parse(decodeURIComponent(value.deviceDic))
			this.euqiptmentLists.length = this.deviceDic.grooveCount
			// console.log(this.euqiptmentLists.length,"length")
		}

		selectM(data: any) {
			console.log('输出选择的槽位数：' + data.id)
			this.selectId = data.id - 1
		}
		//弹出设备
		outDevice() {
			if (this.selectId < 0 || this.selectId > 5) {
				console.log('请选择充电宝槽位')
				return;
			}
			let params = {
				sn: this.deviceDic.sn,
				slot: parseInt(this.selectId + 1),
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			}
			console.log('弹出充电宝参数' + JSON.stringify(params))

			popupTerminal(params).then((res: any) => {
				// console.log(res)
				if (res.data.code == 200) {
					// uni.showToast({
					//     title: res.data.message,
					//     duration: 2000
					// });
				} else {
					uni.showToast({
					    title: res.data.message,
						icon:"none",
					    duration: 2000
					});
				}

			})
		}
		//强制弹出
		forceOut() {
			if (this.selectId < 0 || this.selectId > 5) {
				console.log('请选择充电宝槽位')
				return;
			}
			let params = {
				sn: this.deviceDic.sn,
				slot: parseInt(this.selectId + 1),
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			}
			console.log('强制弹出充电宝参数' + JSON.stringify(params))
			forcePopupTerminal(params).then((res: any) => {
				console.log('++++强制弹出充电宝结果', JSON.stringify(res))
				if (res.data.code == 200) {
					//提交成功后    返回
					// uni.navigateBack({
					// 	delta: 1,
					// });
				} else {
					uni.showToast({
					    title: res.data.message,
						icon:"none",
					    duration: 2000
					});
				}

			})
		}



	}
</script>

<style lang="scss" scoped>
	.footP {

		position: absolute;
		bottom: 0;
		background-color: #000000;
		width: 100%;
		display: flex;
		// flex-direction: column;
		flex-direction: row;
		// align-items: center;
		// justify-content: center;
	}

	.footL {
		width: 50%;
		padding: 0.7rem;
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: #007AFF;
	}

	.euqiptmentListP {

		display: flex;
		flex-wrap: wrap;
	}

	.euqiptmentList {

		width: 33.3%;
		text-align: center;
	}

	.euqiptmentList-child {
		padding: 0.6rem 1rem;
		margin: 0.5rem;
		border: 1px solid #666666;
		border-radius: 0.2rem;
	}
</style>
